<template>
  <div class='app-container'>
    <div class='button-container'>
      <el-button class='filter-item' type='primary' @click="refreshData"><i class="el-icon-loading"></i>刷新</el-button>
      <el-button class='right' type='primary' @click="quit"><i class="el-icon-caret-left"></i>退出</el-button>
    </div>
    <div style="height:300px;border:1px solid #003">
      <!-- 表格 -->
      <el-table class="table" ref="nodeTable" :data="GridPageList" v-loading.body="gridDataIsLoading" element-loading-text="数据加载中..." border fit highlight-current-row>
        <el-table-column align="center" label='#' width="150">
          <template scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="节点ID" width="240">
          <template scope="scope">
            {{scope.row.nodeInfo.nodeid}}
          </template>
        </el-table-column>
        <el-table-column label="节点名称" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.nodename}}
          </template>
        </el-table-column>
        <el-table-column label="节点计算机名称" width="226">
          <template scope="scope">
            {{scope.row.nodeInfo.nodepcname}}
          </template>
        </el-table-column>
        <el-table-column label="节点IP" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.nodeip}}
          </template>
        </el-table-column>
        <el-table-column label="节点Mac" width="240">
          <template scope="scope">
            {{scope.row.nodeInfo.nodemac}}
          </template>
        </el-table-column>
        <el-table-column label="节点说明" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.noderemark}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template scope="scope">
            {{}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-show="!gridDataIsLoading" class="pagination-container">
      <el-pagination @size-change="onPageSizeChanged" @current-change="onPageNoChanged" :current-page.sync="paginationConfig.currentQueryPage" :page-sizes="[10,20,30, 50]" :page-size="paginationConfig.selectedPageSize" layout="total, sizes, prev, pager, next, jumper" :total="dataCount">
      </el-pagination>
    </div>
    <div style="height:300px;border:1px solid #003">
      <!-- 表格 -->
      <el-table class="table" ref="nodeTable" :data="GridPageList" v-loading.body="gridDataIsLoading" element-loading-text="数据加载中..." border fit highlight-current-row>
        <el-table-column align="center" label='#' width="150">
          <template scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column label="节点ID" width="240">
          <template scope="scope">
            {{scope.row.nodeInfo.nodeid}}
          </template>
        </el-table-column>
        <el-table-column label="节点状态" width="200">
          <template scope="scope">
            {{scope.row.nodeRunMonitorInfo.noderunstate}}
          </template>
        </el-table-column>
        <el-table-column label="节点名称" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.nodename}}
          </template>
        </el-table-column>
        <el-table-column label="节点计算机名称" width="226">
          <template scope="scope">
            {{scope.row.nodeInfo.nodepcname}}
          </template>
        </el-table-column>
        <el-table-column label="节点IP" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.nodeip}}
          </template>
        </el-table-column>
        <el-table-column label="节点Mac" width="240">
          <template scope="scope">
            {{scope.row.nodeInfo.nodemac}}
          </template>
        </el-table-column>
        <el-table-column label="节点说明" width="200">
          <template scope="scope">
            {{scope.row.nodeInfo.noderemark}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-show="!gridDataIsLoading" class="pagination-container">
      <el-pagination @size-change="onPageSizeChanged" @current-change="onPageNoChanged" :current-page.sync="paginationConfig.currentQueryPage" :page-sizes="[10,20,30, 50]" :page-size="paginationConfig.selectedPageSize" layout="total, sizes, prev, pager, next, jumper" :total="dataCount">
      </el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'node',
  data() {
    return {
      gridDataSource: [],
      // 当前分页数据开始index
      startIndex: 0,
      // 当前分页数据结束index
      endIndex: 0,
      gridDataIsLoading: false,
      paginationConfig: { selectedPageSize: 10, currentQueryPage: 0 }
    };
  },
  created() {
    this.refreshData();
  },
  methods: {
    /**
       * 刷新数据
       */
    refreshData() {
      this.gridDataIsLoading = true;

      let getNodes = this.$http.get('/Node/NodeAllInfo').then((response) => {
        if (response.data.isSuccess) {
          this.gridDataSource = response.data.nodeInfos;
          this.paginationConfig.currentQueryPage = 1;
        }
        this.paginationConfig.currentQueryPage = 0;
      });

      this.$http.all([getNodes]).then(() => {
        this.gridDataIsLoading = false;
      }).catch(() => {
        this.gridDataIsLoading = false;
      });
    },
    computeDataIndex(pageNo, pageSize) {
      this.startIndex = pageSize * (pageNo - 1) + 1;
      this.endIndex = this.startIndex + pageSize;
      console.log(this.startIndex);
      console.log(this.endIndex);
    },
    /**
     * 分页变化
     */
    onPageSizeChanged(size) {
      this.paginationConfig.selectedPageSize = size;
      this.computeDataIndex(this.paginationConfig.currentQueryPage, size);
    },
    onPageNoChanged(page) {
      this.paginationConfig.currentQueryPage = page;
      this.computeDataIndex(page, this.paginationConfig.selectedPageSize);
    },
    /**
         * 退出
         */
    quit() {
      this.$router.push({ path: '/home/dashboard' });
    }
  },
  computed: {
    GridPageList() {
      if (this.gridDataSource && this.gridDataSource.length > 0) {
        if (this.startIndex > 0 && this.endIndex > 0) {
          return this.gridDataSource.slice(this.startIndex - 1, this.endIndex - 1);
        } else {
          return [];
        }
      } else {
        return [];
      }
    },
    dataCount() {
      if (this.gridDataSource) {
        return this.gridDataSource.length;
      } else {
        return 0;
      }
    }
  }
};
</script>
<style>
.title {
  width: 100%;
  padding: 15px;
  border: 1px solid gray;
  margin: 0px;
  background: GhostWhite;
}

.drag-header {
  width: 100%;
  padding: 10px;
  border: 1px solid gray;
  margin: 0px;
}

.right {
  float: right;
  padding: 10px;
}

.set {
  float: right;
  padding: 1px;
}

.table {
  max-height: 400px;
  overflow: auto;
}
</style>



